<template>
  <div class="piechart-container">
    <div class="ringchart-box">
      <ve-ring :data="chartData" :extend="extend"></ve-ring>
    </div>
    <div class="list-box">
      <div class="list-item">
        <span class="title">good reputstion</span>
        <el-progress class="progress-1" :text-inside="true" :stroke-width="20" :percentage="percentage1"></el-progress>
      </div>
      <div class="list-item">
        <span class="title">service attituds</span>
        <el-progress class="progress-2" :text-inside="true" :stroke-width="20" :percentage="40"></el-progress>
      </div>
      <div class="list-item">
        <span class="title">negative comment</span>
        <el-progress class="progress-3" :text-inside="true" :stroke-width="20" :percentage="percentage2"></el-progress>
      </div>
      <div class="list-item">
        <span class="title">logistics service</span>
        <el-progress class="progress-4" :text-inside="true" :stroke-width="20" :percentage="percentage2"></el-progress>
      </div>
      <div class="list-item">
        <span class="title">good reputstio2n</span>
        <el-progress class="progress-5" :text-inside="true" :stroke-width="20" :percentage="percentage3"></el-progress>
      </div>
    </div>
  </div>
</template>


<script>
import { setInterval, clearInterval } from 'timers';
let timer = null
let timer2 = null
let timer3 = null
export default {
  data() {
    this.extend = {
      legend: {
        show: true,
        bottom: 10,
        left: 90,
        icon: "circle",
        itemWidth: 20, // 设置宽度
        itemHeight: 20, // 设置高度
        itemGap: 40 // 设置间距
      },
      color: ["#b851ff", "#51bbff", "#5aeed7"],
      series: {
        center: ["50%", "40%"],
        radius: [100, 150],
        itemStyle: {
          shadowColor: "rgba(0, 0, 0, 0.4)",
          shadowBlur: 10,
          shadowOffsetX: 10,
          shadowOffsetY: 10
        }
      }
    };
    return {
      chartData: {
        columns: ["日期", "访问用户"],
        rows: [
          { 日期: "cabinet", 访问用户: 1393 },
          { 日期: "pature", 访问用户: 3530 },
          { 日期: "lange", 访问用户: 2923 }
        ]
      },
      percentage1:0,
      percentage2:0,
      percentage3:0,
    };
  },
  mounted(){
    timer = setInterval(()=>{
      if(this.percentage1 >= 55){
        clearInterval(timer)
      }else{
        this.percentage1++
      }
    },70)

    timer2 = setInterval(()=>{
      if(this.percentage2 >= 65){
        clearInterval(timer2)
      }else{
        this.percentage2++
      }
    },60)

    timer3 = setInterval(()=>{
      if(this.percentage3 >= 85){
        clearInterval(timer3)
      }else{
        this.percentage3++
      }
    },50)
  }
};
</script>

<style lang="scss" scoped>
.piechart-container {
  padding-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  .ringchart-box {
    width: 50%;
  }
  .list-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    .list-item {
      width: 100%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.18);
      height: 65px;
      margin-top: 10px;
      border-radius: 5px;
      position: relative;
      right:15px;
      .progress-1 /deep/ .el-progress-bar__inner {
        background: linear-gradient(to right, #5bb3fe, #d49efd) !important;
      }
      .progress-2 /deep/ .el-progress-bar__inner {
        background: linear-gradient(to right, #5bb3fe, #d49efd) !important;
      }
      .progress-3 /deep/ .el-progress-bar__inner {
        background: linear-gradient(to right, #5bb3fe, #d49efd) !important;
      }
      .progress-4 /deep/ .el-progress-bar__inner {
        background: linear-gradient(to right, #55b4fd, #5deed8) !important;
      }
      .progress-5 /deep/ .el-progress-bar__inner {
        background: linear-gradient(to right, #5deed8, #d49efd) !important;
      }
      .title{
        display: inline-block;
        margin-left: 15px;
        padding: 5px;
        font-size: 16px;
        font-weight: bold;
      }
      .el-progress {
        position: absolute;
        top: 34px;
        width: 90%;
        margin-left: 20px;
      }
    }
  }
}
</style>
